<template>
  <div style="margin-left: 400px;">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
      :size="formSize" status-icon>
      <el-form-item label="用户名" prop="userName" style="width: 330px">
        <el-input v-model="ruleForm.userName" />
      </el-form-item>
      <el-form-item label="性别" prop="name">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio :value="false">男</el-radio>
          <el-radio :value="true">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="部门" prop="region" style="width: 330px">
        <el-select v-model="ruleForm.depId" placeholder="请选择部门">
          <el-option label="生产部门" value="1" />
          <el-option label="采购部门" value="2" />
          <el-option label="质量部门" value="3" />
          <el-option label="供应商部门" value="4" />
          <el-option label="销售部门" value="5" />
          <el-option label="审核部门" value="5" />



        </el-select>
      </el-form-item>

      <el-form-item label="昵称" prop="nickName" style="width: 330px">
        <el-input v-model="ruleForm.nickName" />
      </el-form-item>
      <el-form-item label="所在地址" prop="name">
        <el-cascader size="large" :options="options" v-model="provinces" @change="handleChange" placeholder="请选择省市区"
          style="width: 300px;" />
      </el-form-item>

      <el-form-item label="详细地址" prop="hamletName" style="width: 330px">
        <el-input v-model="ruleForm.hamletName" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          添加
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useCounterStore } from '@/stores/counter';
import { regionData } from "element-china-area-data";//引入


const store = useCounterStore();
const router = useRouter();
const options = regionData;
//console.log(options);

const ruleForm = reactive<any>({
  // "userId": 0,
  userName: "",
  password: "123",
  nickName: "",
  sex: null,
  depId: null,
  provinceId: null,
  cityId: null,
  countyId: null,
  hamletName: "",
  createName: store.ccstore.userName,
  createTime: new Date(),
  // "updateName": "string",
  // "updateTime": "2025-02-21T11:43:14.830Z",
  isDel: false
})
const provinces = reactive([])

const handleChange = (values: any) => {
  //console.log(values)
  ruleForm.provinceId = values[0]
  ruleForm.cityId = values[1]
  ruleForm.countyId = values[2]
  //console.log(ruleForm.provinceId = values[0])
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  userName: [
    { required: true, message: '用户名不可为空', trigger: 'blur' },
  ],
  hamletName: [
    { required: true, message: '详细地址不可为空', trigger: 'blur' },
  ],
})

//添加
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.post("https://localhost:7272/api/Message/AddUser", ruleForm).then(res => {
        if (res.data.code == 100) {
          console.log(res.data)
          ElMessage.success(res.data.msg);
         router.push("/NewUserList")
      
        } else {
          if (res.data.data == 0) {
            ElMessage.error("用户名称不能重复");
            return
          }
          else {
            ElMessage.error(res.data.msg);
            return
          }

        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
//#endregion

// onMounted(() => {
//   GetProvince();
// })

</script>

<style scoped></style>